import React, { useEffect } from 'react'
import * as echarts from 'echarts';

export default function index({ id, chartDataList }) {
  useEffect(() => {
    const dom = document.getElementById(`${id}`);
    const chart = echarts.init(dom);
    console.log(chartDataList[id]?.map(item => {
      return item.name
    }));

    const option = {
      xAxis: {
        type: 'category',
        data: chartDataList[id]?.map(item => item.name),
        axisLabel: {
          rotate: 45,
          interval: 0,
          fontSize: 10,
          fontWeight: 'bold',
          formatter: (value) => {
            return value.length > 4 ? value.substring(0, 4) + '...' : value;
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          data: chartDataList[id]?.map(item => item.value),
          type: 'line',
          smooth: true,
          symbolSize: 8,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            color: '#3498db'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(52,152,219,0.5)'
              }, {
                offset: 1, color: 'rgba(52,152,219,0.1)'
              }]
            }
          }
        }
      ],
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const dataIndex = params[0].dataIndex;
          const fullName = chartDataList[id][dataIndex].name;
          const value = params[0].value;
          return `${fullName}<br/>数值：${value}`;
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      }
    };
    option && chart.setOption(option);
    return () => {
      chart.dispose()
    }
  }, [chartDataList])
  return (
    <div style={{ height: '100%' }} id={id}></div>
  )
}

